<template>
	<view class="customerOrders boxSize_bb flexDeCo" style="align-items: center; padding: 20rpx;">
		<template v-for="(item,index) in 4">
			<view class="item flexDeCo boxSize_bb" :class="{mt10:index>0}"
				style="width: 90vw; background-color: white;padding: 20rpx;">
				<view class="top flex" style="justify-content: space-between;">
					<template v-for="(item,y) in 3">
						<template v-if="y>0">
							<image src="/static/images/TabBar/home.png" mode="" style="width: 120rpx;height: 120rpx;">
							</image>
						</template>
						<template v-else>
							<image src="/static/images/TabBar/home.png" mode="" style="width: 120rpx;height: 120rpx;">
							</image>
						</template>
					</template>
					<view class="text flexDeCo">
						<view class="complete">
							交易完成
						</view>
						<view class="price" style="margin-top: 20rpx;">
							￥550
						</view>
						<view class="number">
							共三件
						</view>

					</view>
				</view>
				<view class="middle" style="margin-top: 14rpx;">
					下单时间: 2023-10-01 12:00:00
				</view>
				<view class="bottom flex" style="margin-top: 20rpx;">
					<view class="deleteOrder" style="height: 50rpx; border-radius: 25rpx; " @tap="sureDelete">
						删除订单
					</view>
					<view class="button purchaseAgain" style="height: 60rpx; border-radius: 30rpx; margin-left: 10rpx;"
						@tap="showPurchasePop=true">
						再来一单
					</view>
				</view>
			</view>
			<!-- 再来一单的弹窗 -->
			<template v-if="showPurchasePop">
				<pucharse-pop @closePucharsePop="closePurchasePop"></pucharse-pop>
			</template>

		</template>

	</view>
</template>

<script>
	import pucharsePop from '../common/pucharsePop/pucharsePop.vue';
	import showModelFn from '../../utils/showModel';
	import {
		showModal
	} from '../../utils/promise';

	export default {
		data() {
			return {
				showPurchasePop: false,

			};
		},
		methods: {
			closePurchasePop() {
				this.showPurchasePop = false;
			},

			sureDelete() {
				showModelFn(() => {

				})

			}

		},
		components: {
			pucharsePop
		}

	}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

	.mt10 {
		margin-top: 20rpx;
	}

	.customerOrders {
		font-size: 28rpx;

		.item {

			.top {
				.text {
					text-align: right;

					.price {
						font-size: 30rpx;
						font-weight: 700;
					}

					.number {
						color: #979797;
						font-size: 24rpx;
					}
				}
			}

			.middle {
				color: #979797;
			}


			.bottom {
				justify-content: flex-end;
				align-items: center;



				.deleteOrder {
					border: 2rpx solid darkgray;
					color: darkgray;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 20rpx;
					box-sizing: border-box;

				}

				.purchaseAgain {
					padding: 20rpx;
					box-sizing: border-box;
				}

			}
		}
	}
</style>